<!-- PlutoDetailFooter.vue 增强版 -->
<template>
  <div class="button-area" :style="areaStyle">
    <div class="button-left">
      <slot name="left">
        <!-- 默认左侧内容 -->
        <el-button>左侧按钮</el-button>
      </slot>
    </div>
    <div
      v-if="showRight"
      class="button-right"
      :style="rightStyle"
      @click="handleRightClick"
      @mouseenter="hover = true"
      @mouseleave="hover = false"
    >
      <slot name="right" :hover="hover">
        <span>{{ rightText }}</span>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlutoDetailFooter',
  props: {
    // 控制右侧按钮显示
    showRight: {
      type: Boolean,
      default: true
    },
    // 右侧按钮是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    rightText: {
      type: String,
      default: '下一环节 >>'
    },
    rightWidth: {
      type: String,
      default: '140px'
    },
    rightBgColor: {
      type: String,
      default: '#4377E4'
    },
    rightHoverColor: {
      type: String,
      default: '#2c5fc9'
    },
    rightDisabledColor: {
      type: String,
      default: '#c0c4cc'
    },
    height: {
      type: String,
      default: '70px'
    },
    backgroundColor: {
      type: String,
      default: '#fff'
    },
    showBorder: {
      type: Boolean,
      default: true
    }
  },
  emits: ['next-click'],
  data() {
    return {
      hover: false
    }
  },
  computed: {
    areaStyle() {
      return {
        height: this.height,
        backgroundColor: this.backgroundColor,
        borderTop: this.showBorder ? '1px solid #e8e8e8' : 'none'
      }
    },
    rightStyle() {
      const bgColor = this.disabled
        ? this.rightDisabledColor
        : (this.hover ? this.rightHoverColor : this.rightBgColor)

      return {
        width: this.rightWidth,
        backgroundColor: bgColor,
        cursor: this.disabled ? 'not-allowed' : 'pointer',
        opacity: this.disabled ? 0.6 : 1
      }
    }
  },
  methods: {
    handleRightClick() {
      if (!this.disabled) {
        this.$emit('next-click')
      }
    }
  }
}
</script>

<style scoped>
.button-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 20px;
  flex-shrink: 0;
}

.button-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button-right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #FFFFFF;
  font-weight: 700;
  text-align: center;
  font-size: 18px;
  transition: all 0.3s ease;
}

.button-right:active {
  transform: translateY(1px);
}
</style>
